<template>
  <div>
    <CustomDialog
      title="新增/编辑写字楼"
      width="900px"
      :visible.sync="isShowDialog"
      @closed="handleCloseDialog"
    >
      <el-form
        ref="ruleForm"
        v-loading="loading"
        :model="form"
        :rules="rules"
        label-position="left"
        hide-required-asterisk
      >
        <div class="h1 mt-0">基本信息</div>
        <!-- 土地标题 -->
        <el-form-item label="" prop="name" class="row-all">
          <template #label>
            <div class="form-label required">写字楼标题</div>
          </template>
          <el-input v-model="form.name" placeholder="20字以内文字描述"></el-input>
        </el-form-item>
        <!-- 面积 -->
        <el-form-item label="" prop="area" class="row-left">
          <template #label>
            <div class="form-label required">面积</div>
          </template>
          <el-input v-model="form.area" type="number" placeholder="请输入">
            <div slot="suffix" class="pr-2 text-[#444450]">平米</div>
          </el-input>
        </el-form-item>
        <!-- 租售类型 -->
        <el-form-item prop="rentOrSale" class="row-right">
          <template #label>
            <div class="form-label required">租售类型</div>
          </template>
          <el-select v-model="form.rentOrSale" class="w-full">
            <el-option
              v-for="item in rentOrSaleOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 租金 -->
        <el-form-item label="" prop="rent" class="row-left">
          <template #label>
            <div class="">租金</div>
          </template>
          <el-input
            v-model="form.rent"
            type="number"
            placeholder="请输入"
            :disabled="form.rentOrSale === '2'"
          >
            <div slot="suffix" class="pr-2 text-[#444450]">元/平米*月</div>
          </el-input>
        </el-form-item>
        <!-- 售价 -->
        <el-form-item label="" prop="price" class="row-right">
          <template #label>
            <div class="">售价</div>
          </template>
          <el-input
            v-model="form.price"
            type="number"
            placeholder="请输入"
            :disabled="form.rentOrSale === '1'"
          >
            <div slot="suffix" class="pr-2 text-[#444450]">元/平米</div>
          </el-input>
        </el-form-item>
        <!-- 楼宇标签 -->
        <el-form-item prop="tags" class="row-all">
          <template #label>
            <div class="">楼宇标签</div>
          </template>
          <el-select
            v-model="form.tags"
            class="w-full"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="可选择或自定义标签"
          >
            <el-option
              v-for="item in buildingTagOptions"
              :key="item.value"
              :label="item.label"
              :value="item.label"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 楼宇地址 -->
        <el-form-item label="" prop="addrs" class="row-left mb-4">
          <template #label>
            <div class="required">楼宇地址</div>
          </template>
          <el-input v-model="form.addrs" readonly placeholder="点击右侧按钮在地图上选点">
            <i
              slot="suffix"
              class="el-icon-location-outline text-2xl pr-1 pt-[4px] cursor-pointer"
              @click="isShowMap = true"
            />
          </el-input>
        </el-form-item>
        <!-- 楼宇介绍 -->
        <el-form-item label="" prop="desc" class="row-all">
          <template #label>
            <div>楼宇介绍</div>
          </template>
          <el-input
            v-model="form.desc"
            type="textarea"
            :rows="3"
            maxlength="300"
            show-word-limit
            placeholder="300字以内文字描述"
          ></el-input>
        </el-form-item>
        <!-- 多媒体资料 -->
        <div class="h1">多媒体资料</div>
        <!-- 图片 -->
        <el-form-item label="" prop="imgList" class="row-all">
          <template #label>
            <div>图片</div>
          </template>
          <CustomUpload :img-list.sync="form.imgList" />
        </el-form-item>
        <!-- 视频 -->
        <el-form-item label="" prop="videoList" class="row-all">
          <template #label>
            <div>视频</div>
          </template>
          <VideoUpload :img-list.sync="form.videoList" />
        </el-form-item>
        <!-- VR全景 -->
        <el-form-item label="" prop="vrLink" class="row-all">
          <template #label>
            <div>VR全景</div>
          </template>
          <el-input v-model="form.vrLink" placeholder="粘贴全景链接"></el-input>
        </el-form-item>
        <!-- 基础设施 -->
        <div class="h1">楼宇信息</div>
        <!-- 竣工时间 -->
        <el-form-item label="" prop="completionTime" class="row-left">
          <template #label>
            <div class="form-label">竣工时间</div>
          </template>
          <el-input v-model="form.completionTime" type="number" placeholder="请输入">
            <div slot="suffix" class="pr-2 text-[#444450]">年</div>
          </el-input>
        </el-form-item>
        <!-- 建筑高度 -->
        <el-form-item label="" prop="buildingHeight" class="row-right">
          <template #label>
            <div class="form-label">建筑高度</div>
          </template>
          <el-input v-model="form.buildingHeight" type="number" placeholder="请输入">
            <div slot="suffix" class="pr-2 text-[#444450]">米</div>
          </el-input>
        </el-form-item>
        <!-- 占地面积 -->
        <el-form-item label="" prop="areaCovered" class="row-left">
          <template #label>
            <div class="form-label">占地面积</div>
          </template>
          <el-input v-model="form.areaCovered" type="number" placeholder="请输入">
            <div slot="suffix" class="pr-2 text-[#444450]">平米</div>
          </el-input>
        </el-form-item>
        <!-- 建筑面积 -->
        <el-form-item label="" prop="buildingArea" class="row-right">
          <template #label>
            <div class="form-label">建筑面积</div>
          </template>
          <el-input v-model="form.buildingArea" type="number" placeholder="请输入">
            <div slot="suffix" class="pr-2 text-[#444450]">平米</div>
          </el-input>
        </el-form-item>
        <!-- 地上楼层数 -->
        <el-form-item label="" prop="upFloor" class="row-left">
          <template #label>
            <div class="form-label">地上楼层数</div>
          </template>
          <el-input v-model="form.upFloor" type="number" placeholder="请输入">
            <div slot="suffix" class="pr-2 text-[#444450]">层</div>
          </el-input>
        </el-form-item>
        <!-- 地下楼层数 -->
        <el-form-item label="" prop="downFloor" class="row-right">
          <template #label>
            <div class="form-label">地下楼层数</div>
          </template>
          <el-input v-model="form.downFloor" type="number" placeholder="请输入">
            <div slot="suffix" class="pr-2 text-[#444450]">层</div>
          </el-input>
        </el-form-item>
        <!-- 标准层数 -->
        <el-form-item label="" prop="floor" class="row-left">
          <template #label>
            <div class="form-label">标准层数</div>
          </template>
          <el-input v-model="form.floor" type="number" placeholder="请输入">
            <div slot="suffix" class="pr-2 text-[#444450]">层</div>
          </el-input>
        </el-form-item>
        <!-- 标准层高 -->
        <el-form-item label="" prop="floorHeight" class="row-right">
          <template #label>
            <div class="form-label">标准层高</div>
          </template>
          <el-input v-model="form.floorHeight" type="number" placeholder="请输入">
            <div slot="suffix" class="pr-2 text-[#444450]">米</div>
          </el-input>
        </el-form-item>
        <!-- 大堂层高 -->
        <el-form-item label="" prop="lobbyHeight" class="row-left">
          <template #label>
            <div class="form-label">大堂层高</div>
          </template>
          <el-input v-model="form.lobbyHeight" type="number" placeholder="请输入">
            <div slot="suffix" class="pr-2 text-[#444450]">米</div>
          </el-input>
        </el-form-item>
        <!-- 大堂面积 -->
        <el-form-item label="" prop="lobbyArea" class="row-right">
          <template #label>
            <div class="form-label">大堂面积</div>
          </template>
          <el-input v-model="form.lobbyArea" type="number" placeholder="请输入">
            <div slot="suffix" class="pr-2 text-[#444450]">平米</div>
          </el-input>
        </el-form-item>
        <!-- 开发单位 -->
        <el-form-item label="" prop="developer" class="row-left">
          <template #label>
            <div class="form-label">开发单位</div>
          </template>
          <el-input v-model="form.developer" placeholder="请输入"> </el-input>
        </el-form-item>
        <!-- 物业单位 -->
        <el-form-item label="" prop="property" class="row-right">
          <template #label>
            <div class="form-label">物业单位</div>
          </template>
          <el-input v-model="form.property" placeholder="请输入"> </el-input>
        </el-form-item>
        <!-- 设施设备 -->
        <div class="h1">设施设备</div>
        <!-- 车位总数 -->
        <el-form-item label="" prop="parkingSpace" class="row-left">
          <template #label>
            <div class="">车位总数</div>
          </template>
          <el-input v-model="form.parkingSpace" type="number" placeholder="请输入">
            <div slot="suffix" class="pr-2 text-[#444450]">个</div>
          </el-input>
        </el-form-item>
        <!-- 访客车位数 -->
        <el-form-item label="" prop="visitorParkingSpace" class="row-right">
          <template #label>
            <div class="">访客车位数</div>
          </template>
          <el-input v-model="form.visitorParkingSpace" type="number" placeholder="请输入">
            <div slot="suffix" class="pr-2 text-[#444450]">个</div>
          </el-input>
        </el-form-item>
        <!-- 电梯数量 -->
        <el-form-item label="" prop="lift" class="row-left">
          <template #label>
            <div class="">电梯数量</div>
          </template>
          <el-input v-model="form.lift" placeholder="请输入" type="number">
            <div slot="suffix" class="pr-2 text-[#444450]">个</div>
          </el-input>
        </el-form-item>
        <!-- 电梯品牌 -->
        <el-form-item label="" prop="liftBrand" class="row-right">
          <template #label>
            <div class="">电梯品牌</div>
          </template>
          <el-input v-model="form.liftBrand" placeholder="请输入"> </el-input>
        </el-form-item>
        <!-- 空调形式 -->
        <el-form-item prop="airCondType" class="row-left">
          <template #label>
            <div>空调形式</div>
          </template>
          <el-select v-model="form.airCondType" class="w-full">
            <el-option
              v-for="item in airCondTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 空调分户控制 -->
        <el-form-item prop="airCondCtrlType" class="row-right">
          <template #label>
            <div>空调分户控制</div>
          </template>
          <el-select v-model="form.airCondCtrlType" class="w-full">
            <el-option
              v-for="item in airCondCtrlTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 楼宇智能化 -->
        <el-form-item prop="intelligence " class="row-left">
          <template #label>
            <div>楼宇智能化</div>
          </template>
          <el-select
            v-model="form.intelligence"
            multiple
            collapse-tags
            class="w-full"
            @change="handleSelect"
          >
            <el-option
              v-for="item in intelligenceOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 运营成本 -->
        <div class="h1">运营成本</div>
        <!-- 电价 -->
        <el-form-item label="" prop="powerFee" class="row-left">
          <template #label>
            <div class="">电价</div>
          </template>
          <el-input v-model="form.powerFee" placeholder="请输入" type="number">
            <div slot="suffix" class="pr-2 text-[#444450]">元/度</div>
          </el-input>
        </el-form-item>
        <!-- 水价 -->
        <el-form-item label="" prop="waterFee" class="row-right">
          <template #label>
            <div class="">水价</div>
          </template>
          <el-input v-model="form.waterFee" placeholder="请输入" type="number">
            <div slot="suffix" class="pr-2 text-[#444450]">元/吨</div>
          </el-input>
        </el-form-item>
        <!-- 停车费 -->
        <el-form-item label="" prop="parkingFee" class="row-left">
          <template #label>
            <div class="">停车费</div>
          </template>
          <el-input v-model="form.parkingFee" placeholder="请输入" type="number">
            <div slot="suffix" class="pr-2 text-[#444450]">元/月</div>
          </el-input>
        </el-form-item>
        <!-- 物业费 -->
        <el-form-item label="" prop="propertyFee" class="row-right">
          <template #label>
            <div class="">物业费</div>
          </template>
          <el-input v-model="form.propertyFee" placeholder="请输入" type="number">
            <div slot="suffix" class="pr-2 text-[#444450]">元/平米*月</div>
          </el-input>
        </el-form-item>
        <!-- 供暖费 -->
        <el-form-item label="" prop="heatingFee" class="row-left">
          <template #label>
            <div class="">供暖费</div>
          </template>
          <el-input v-model="form.heatingFee" placeholder="请输入" type="number">
            <div slot="suffix" class="pr-2 text-[#444450]">元/平米*月</div>
          </el-input>
        </el-form-item>
        <!-- 空调费 -->
        <el-form-item label="" prop="airCondFee" class="row-right">
          <template #label>
            <div class="">空调费</div>
          </template>
          <el-input v-model="form.airCondFee" placeholder="请输入" type="number">
            <div slot="suffix" class="pr-2 text-[#444450]">元/平米*月</div>
          </el-input>
        </el-form-item>
        <!-- 联系人 -->
        <div class="h1">联系方式</div>
        <el-form-item label="" prop="contacts" class="row-all">
          <template #label>
            <div>联系人</div>
          </template>

          <div class="flex space-x-2 mb-2">
            <el-input v-model="form.contacts[0].name" placeholder="请输入" class="w-4/12" />
            <el-input v-model="form.contacts[0].phone" class="w-5/12" placeholder="输入联系方式" />
            <el-button type="text" @click="handleAddContacts">+新增联系人</el-button>
          </div>

          <div
            v-for="(item, index) in form.contacts.slice(1)"
            :key="index"
            class="flex space-x-2 mb-2"
          >
            <el-input v-model="item.name" placeholder="请输入" class="w-4/12" />
            <el-input v-model="item.phone" class="w-5/12" placeholder="输入联系方式" />
            <i
              class="el-icon-remove-outline text-xl cursor-pointer flex items-center"
              @click="handleDelContacts(index)"
            ></i>
          </div>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button class="rounded-content-wrap" @click="isShowDialog = false">取 消</el-button>
        <el-button type="primary" class="rounded-content-wrap" @click="handleOk">确 定</el-button>
      </span>
    </CustomDialog>

    <PositionPicker
      :visible.sync="isShowMap"
      :position.sync="form.position"
      :addrs.sync="form.addrs"
    />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import CustomUpload from '../common/CustomUpload/index.vue'
import VideoUpload from '../common/CustomUpload/videoUpload.vue'
import CustomDialog from '../common/CustomDialog/index.vue'
import PositionPicker from '../common/CustomAMap/PositionPicker.vue'
import {
  rentOrSaleOptions,
  airCondTypeOptions,
  airCondCtrlTypeOptions,
  intelligenceOptions,
  buildingTagOptions,
} from '../common/dictionary'

import addEditMixin from '../common/addEditMixin'
const selectKey = [
  { key: 'rentOrSale', options: 'rentOrSaleOptions' },
  { key: 'airCondType', options: 'airCondTypeOptions' },
  { key: 'airCondCtrlType', options: 'airCondCtrlTypeOptions' },
  { key: 'intelligence', options: 'intelligenceOptions' },
]

export default Vue.extend({
  components: { CustomUpload, CustomDialog, PositionPicker, VideoUpload },
  mixins: [addEditMixin({ selectKey, templateName: 'B_CONSOLE_BUILDING' })],
  data() {
    return {
      form: {
        name: '',
        area: null,
        rentOrSale: '',
        rent: null,
        price: null,
        tags: [],
        position: '',
        addrs: '',
        desc: '',
        imgList: [],
        videoList: [],
        vrLink: '',
        completionTime: '',
        buildingHeight: null,
        areaCovered: null,
        buildingArea: null,
        upFloor: null,
        downFloor: null,
        floor: null,
        floorHeight: null,
        lobbyHeight: null,
        lobbyArea: null,
        developer: '',
        property: '',
        parkingSpace: null,
        visitorParkingSpace: null,
        lift: null,
        liftBrand: '',
        airCondType: '',
        airCondCtrlType: '',
        intelligence: [],
        powerFee: null,
        waterFee: null,
        parkingFee: null,
        propertyFee: null,
        heatingFee: null,
        airCondFee: null,
        contacts: [{ name: '', phone: '' }],
      },
      rules: {
        name: [
          { required: true, message: '请输入写字楼标题', trigger: 'blur' },
          { min: 3, max: 20, message: '长度为3~20个字符', trigger: 'blur' },
        ],
        area: [{ required: true, message: '请输入写字楼面积', trigger: 'blur' }],
        rentOrSale: [{ required: true, message: '请选择租售类型', trigger: 'change' }],
        addrs: [{ required: true, message: '请选择写字楼地址', trigger: 'blur' }],
      },
      rentOrSaleOptions,
      airCondTypeOptions,
      airCondCtrlTypeOptions,
      intelligenceOptions,
      buildingTagOptions,
    }
  },
  methods: {
    handleSelect(e) {
      console.log(e, this.form)
    },
  },
})
</script>

<style lang="scss" scoped>
@import '@/assets/scss/form.scss';
</style>
